<template>
	<s-layout title="专区"  tabbar="/pages/zone/index"  
	>
	<!-- navbar="custom" -->
		<!-- <view class="header_">
			<view>会员购</view>
		</view> -->

		<view class="nav_">
			<view class="nav_title">
				<view class="title_tit_">开通尊享会员</view>
				<view class="title_tit_">快乐轻松省钱</view>
			</view>
			<view class="nav_title">
				<view class="nav_title_tit">购物花的少 · 分享赚的多</view>
			</view>

			
		</view>
		<!-- <view class="box_">
				
		</view> -->

		<view class="goods_">
			<view class="goods_box_">

				<view v-for="(item,index) in state.list" class="goods_item_"  @click="sheep.$router.go('/pages/goods/index?id='+item.id)">
					<view>
						<image class="goods_item_img"
						:src="item.image" @error="imageError"></image>
					</view>
					<view class="mb">
						<text class="goods_title_">{{ item.title }}</text>
					</view>
					<view class="goods_tag mb">{{ item.subtitle }}</view>
					<view class="goods_price mb">
						<view class="goods_price_new">￥{{ item.price?.[0] }}</view>
						<!-- <view class="goods_price_old">￥{{ item.original_price }}</view> -->
						<view class="goods_price_pv">PV:{{ item.pv }}</view>
					</view>
					<!-- <view class="goods_price mb">
						<view class="goods_price_pv">PV:{{ item.pv }}</view>
					</view> -->
				</view>

				<!-- <view class="goods_item_">
					<view>
						<image class="goods_item_img" 
						src="https://v5.crmeb.net/uploads/attach/2024/02/20240202/mid_9fb81503aba635266a9b246c0a22de94.png" @error="imageError"></image>
					</view>
					<view class="mb">
						<text class="goods_title_">索尼（SONY）WH-CH510 无线立体声耳机 学生网课 白色</text>
					</view>
					<view class="goods_tag mb">无线立体声耳机</view>
					<view class="goods_price mb">
						<view class="goods_price_new">￥4498.00</view>
						<view class="goods_price_old">￥5380.00</view>
					</view>
				</view>

				<view class="goods_item_">
					<view>
						<image class="goods_item_img"  
						src="http://v5.crmeb.net/uploads/attach/2020/10/14/ab30f19cc4aa26c7b009552fcb4d1261.jpg" @error="imageError"></image>
					</view>
					<view class="mb">
						<text class="goods_title_">耐克NIKE 男子 板鞋 AJ1 乔1 AIR JORDAN 1 LOW SE 休闲鞋 CK3022-005黑色43码</text>
					</view>
					<view class="goods_tag mb">ORDANSE 休闲鞋</view>
					<view class="goods_price mb">
						<view class="goods_price_new">￥4498.00</view>
						<view class="goods_price_old">￥5380.00</view>
					</view>
				</view> -->
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import { isEmpty } from 'lodash';

	const state = reactive({
		list:{}
	})



	async function getZoneGoodsList(){
		const res = await sheep.$api.zone.list();
		console.log(res)
		if(res.code == 1){
			state.list = res.data.data
		}
	}


	onLoad(async (options) => {
		getZoneGoodsList()
	})
</script>

<style scoped>
	.header_{
		color: black;
		text-align: center;
		padding: 36rpx;
		border-bottom: 1px solid #E26C41;
		font-size: 28rpx;
	}
	.nav_{
		padding: 26rpx;
		border-bottom-left-radius:26rpx;
		border-bottom-right-radius:26rpx;
	}

	.nav_title{
		display: flex;
		justify-content: center;
		color: black;
	}
	.title_tit_{
		padding: 18rpx;
		color: black;
	}
	.nav_title_tit{
		color: #999;font-size: 14px;
	}

	.goods_{
		margin: 0px 8px 10px;
		margin-top: 20rpx;
	}
	.goods_box_{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.goods_item_{
		width: 48%;
		/**background: #48A854;**/
		margin-bottom: 20rpx;
	}

	.goods_title_{
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		 color: #222;
	}
	.goods_item_img{
		width: 340rpx; 
		height: 400rpx; 
		background-color: #eeeeee;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}
	.goods_tag{
		color: rgb(140, 140, 140);
		font-size: .75rem;
		font-weight: 400;
		color: #999;
	}
	.goods_price{
		display: flex;
		justify-content: space-between;
	}
	.goods_price_new{
		color: rgb(253, 80, 47);
		font-size: 32rpx;
	}
	.goods_price_old{
		text-decoration: line-through;
		font-size: .625rem;
		color: rgb(196, 196, 196);
	}
	.mb{
		margin-bottom: 10rpx;
	}

	.goods_price_ys{
		font-size: .625rem;
		color: rgb(196, 196, 196);
	}
	.goods_price_pv{
		font-size: .625rem;
		color: rgb(196, 196, 196);
	}
</style>